<template>
  <div class="p-[20px] bg-white">
    <el-form
      class="w-[800px]"
      label-width="200"
      :rules="rules"
      :model="form"
      ref="formRef"
    >
      <el-form-item label="商家号" prop="merCupNo">
        <el-input
          :disabled="true"
          v-model="form.merCupNo"
          placeholder="请输入商家号"
        />
      </el-form-item>
      <el-form-item label="联系手机号" prop="contactMobile">
        <el-input
          :disabled="disabled"
          v-model="form.contactMobile"
          placeholder="请输入联系手机号"
        />
      </el-form-item>
      <el-form-item label="最低分账比例" prop="splitLowestRatio">
        <el-input
          :disabled="disabled"
          v-model="form.splitLowestRatio"
          placeholder="请输入最低分账比例"
        />
        <div class="form-helper">变更比例必传</div>
      </el-form-item>
      <el-form-item label="分账结算委托书文件名称" prop="entrustFileName">
        <el-input
          :disabled="disabled"
          v-model="form.entrustFileName"
          placeholder="请输入分账结算委托书文件名称"
        />
      </el-form-item>
      <el-form-item label="分账结算委托书文件" prop="entrustFile">
        <SingleUpload
          :disabled="disabled"
          v-model="form.entrustFile"
          :type="UploadEnum.XY"
          :extra="{ merCupNo: form.merCupNo }"
          @success="
            (data) => {
              form.attFileId = data.attFileId;
            }
          "
        />
        <div class="form-helper block w-full">变更比例必传</div>
        <div class="form-helper block w-full">支持5M以内jpg/png/pdf格式</div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">保存</el-button>
        <el-button type="primary" @click="() => $router.go(-1)">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import PaymentSplitAPI, { PaymentSplitVO } from "@/api/split";
import { UploadEnum } from "@/enums/UploadEnum";

const form = ref<PaymentSplitVO>({
  merCupNo: "",
  contactMobile: "",
  entrustFileName: "",
  entrustFile: "",
  attFileId: "",
});

const formRef = ref();

const rules = {
  merCupNo: [{ required: true, message: "请输入商家号" }],
  contactMobile: [{ required: true, message: "请输入联系手机号" }],
  splitLowestRatio: [{ required: true, message: "请输入最低分账比例" }],
};

const handleSubmit = () => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      const { id } = form.value;
      if (id) {
        PaymentSplitAPI.updateSplitGate(form.value).then((res) => {
          ElMessage.success("修改成功");
        });
      } else {
        PaymentSplitAPI.addSplitGate(form.value).then((res) => {
          ElMessage.success("添加成功");
        });
      }
    }
  });
};

const route = useRoute();
const disabled = computed(() => route.query.disabled === "true");

const initFormConfig = (data: any) => {
  console.log(data);
  form.value = data ?? { merCupNo: route.query.merCupNo as string };
};

onMounted(() => {
  if (route.query.merCupNo) {
    PaymentSplitAPI.getSplitGate(route.query.merCupNo as string).then((res) => {
      console.log(res);
      initFormConfig(res);
    });
  }
});
</script>
